<template>
  <div class="app">
    <h3>订阅管理</h3>
    <el-row style="" class="top-email">
      <el-button type="warning" @click="sendEmail([], 1)" plain
        >一键发送</el-button
      >
    </el-row>

    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
<!--      <el-table-column type="selection" width="55"> </el-table-column>-->
      <el-table-column
        prop="email"
        label="邮箱"
        width="300"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column prop="status" label="状态" width="180">
      </el-table-column>
      <el-table-column prop="updateTime" label="订阅时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button :disabled="scope.row.status ==='禁用' " size="small" @click="sendEmail([scope.row.email], '0')"
            >发送订阅邮件</el-button
          >
          <el-button  type="info" size="small" @click="upStatus(scope.row)">{{
              scope.row.status === "启用" ? "禁用" : "启用"
            }}
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @current-change="handCurrentChange"
        background
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAll: 0,
      //多选数据
      multipleSelection: [],
      emails: [],
      tableData: [],
      params: {
        pageNo: "1",
        pageSize: "8",
        email: [],
        status: "",
      },
      total:0,
    };
  },

  methods: {
    //多选变化
    handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
      this.emails = val.map((obj) => obj.email);
      if (val.length != 0) {
        this.isAll = 0;
      } else {
        this.isAll = 1;
      }
    },

    handCurrentChange(val) {
      // console.log(`当前页：${val}`);
      this.params.pageNo = val;
      this.getData();
    },
    sendEmail(row, isAll) {
      // console.log(row.email)

      this.$router.push({
        name: "email",
        params: {
          email: row,
          isAll: isAll,
        },
      });
      this.isAll = 0;
      this.emails = [];
    },

    getData() {
      this.$http
        .get("subscribe/get-subscribe", {
          params: this.params,
        })
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          } else {
            this.$message.error("系统错误");
          }
          // console.log(res)
        })
        .catch((err) => {
          console.error(err);
        });
    },

    upStatus(row) {
      row.status == "启用" ? (row.status = "禁用") : (row.status = "启用");
      this.$http
        .put("subscribe/update", [row])
        .then((res) => {
          let code = res.data.code;
          if (code == 200) {
            this.$message.success("修改成功");
          }
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },

  created() {
    this.getData();
  },
};
</script>

<style src="@/style/explosive.css" scoped>
</style>